<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css">
    <style>
        #boys {
            width: 50%;
            margin-left: 25%;
            box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
        }

        #footsd {
            margin-top: 10px;
            width: 60%;
            margin-left: 20%;
            box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
        }

        #results {
            text-align: center;
        }

        #boys-one {
            padding-top: 10px;
            padding-left: 40px;
        }
    </style>
</head>
<body>
<div id="app">
    <div id="boys">
        <div id="boys-one">
            <el-form :inline="true" :model="tablesd" class="demo-form-inline">
                <el-form-item label="商品编号:">
                    <el-input v-model="tablesd.goodsid" @change="findinput" placeholder="请输入交易编号"></el-input>
                </el-form-item>
                <br>
                <el-form-item label="商品价格:">
                    <el-input v-model="tablesd.price" :disabled="true"></el-input>
                </el-form-item>
                <br>
                <el-form-item label="交易数量:">
                    <el-input-number v-model="tablesd.num" @change="handleChange" :min="1" :max="100"></el-input-number>
                </el-form-item>
                <br>
                <el-form-item label="交易金额:">
                    <el-input v-model="tablesd.allprice" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item><br>
                    <el-button type="primary" @click="buygoods">购买</el-button>
                    <el-button @click="resetForm">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>

    <div id="footsd">
        <template>
            <el-table
                    :data="tableData"
                    height="250"
                    border
                    style="width: 100%">
                <el-table-column
                        fixed
                        prop="saleId"
                        label="销售编号"
                        width="100">
                </el-table-column>
                <el-table-column
                        prop="commodityId"
                        label="商品编号"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="userId"
                        label="用户编号"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="saleQuantity"
                        label="销售数量"
                        width="110">
                </el-table-column>
                <el-table-column
                        prop="saleAmount"
                        label="销售金额"
                        width="110">
                </el-table-column>
                <el-table-column
                        prop="transactionId"
                        label="交易编号"
                        width="140">
                </el-table-column>
                <el-table-column
                        prop="saleDate"
                        label="销售日期"
                >
                </el-table-column>
                <el-table-column
                        fixed="right"
                        label="操作"
                        width="120">
                    <template slot-scope="scope">
                        <el-button
                                @click.native.prevent="deleteRow(scope.$index, tableData)"
                                type="text"
                                size="small">
                            移除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </template>
        <div id="results">
            <el-button type="primary" @click="submitorder">提交订单</el-button>
            <el-button @click="cancel">取消订单</el-button>
        </div>
    </div>
</div>
<script src="../js/vue.js"></script>
<script src="../element-ui/lib/index.js"></script>
<script src="../js/axios-0.18.0.js"></script>
<script>
    var temp=0;
    var Main = {
        created(){
            this.foundOrder();
        },
        methods: {
            handleChange(value) {
                this.tablesd.allprice = (this.tablesd.num*100) * (this.tablesd.price*100)/10000;
            },
            findinput: function (string) {
                if (string != null) {
                    axios.get('../buys', {params: {op: "findprice", goid: string}}).then(response => {
                        if(response.data==null){
                            alert("商品编号输入有误！！！");
                        }else {
                            console.log(response.data);
                            this.tablesd.price = response.data;
                            this.tablesd.allprice=response.data;
                        }
                    })
                }
            },
            buygoods: function () {
                axios.get('../buys',
                    {params: {op: "foundtails",commodityId:this.tablesd.goodsid,saleQuantity:this.tablesd.num,saleAmount:this.tablesd.allprice,transactionId:this.orderid}}
                ).then(response => {
                    console.log(response);
                })
                // axios.get('buys', {params: {op: "find",transactionId:this.orderid}}).then(response => {
                //    this.tableData=response.data.data;
                // })
                this.findsb();
            },
            resetForm(){
                this.tablesd=this.retablesd;
                this.findsb();
            },
            foundOrder(){
                axios.get('../buys', {params: {op: "founds"}}).then(response => {
                    console.log(response.data);
                    this.orderid=response.data;
                })
            },
            submitorder(){
                axios.get('../buys', {params: {op: "submit",transactionId:this.orderid}}).then(response => {
                    console.log("why:"+response.data);
                    if(response.data>0){
                        alert("提交成功");
                    }else {
                        alert("提交失败");
                    }
                    document.location.reload();
                })
            },
            cancel(){
                axios.get('../buys', {params: {op: "over",transactionId:this.orderid}}).then(response => {
                    console.log(response.data);
                })
                document.location.reload();
            },
            deleteRow(index, rows) {
                const deletedRows = rows.splice(index, 1);
                console.log('被删除的行数据：', deletedRows);
                console.log('被删除的行数据：', deletedRows[0].saleId);
                var saleId= deletedRows[0].saleId;
                axios.get('../buys', {params: {op:"modify",saleId:saleId}}).then(response => {
                    console.log("学习："+response);
                })
                this.findsb();
            },
            findsb(){
                axios.get('../buys', {params: {op: "find",transactionId:this.orderid}}).then(response => {
                    this.tableData=response.data.data;
                })
            }
        },
        data() {
            return {
                orderid:0,
                temp:0,
                tablesd: {
                    goodsid: '',
                    num: 0,
                    price: 0,
                    allprice: 0
                },
                tableData: [],
				retablesd:{
					goodsid: '',
					num:0,
					price: 0,
					allprice: 0
				}
            }
        }
    }
    var Ctor = Vue.extend(Main)
    new Ctor().$mount('#app');
</script>

</body>
</html>